@import 'theme';
$success: #337ab7;
.option-box {
    .option-item {
        .option-value {
            display: inline-block;
        }
        select {
            min-width: 40px;
        }
    }
}
.question-item {
    margin-bottom: 30px;
    position: relative;
    min-height: 60px;
    .title {
        font-size: 16px;
        .order {
            font-weight: bold;
            font-size: 30px;
            margin-left: 20px;
        }
        .wrong,
        .right {
            display: inline-block;
            min-width: 30px;
            vertical-align: bottom;
            padding: 0 10px;
            &:hover {
                border-bottom-width: 3px;
            }
        }
        .wrong {
            border-bottom: 1px solid $error;
        }
        .right {
            border-bottom: 1px solid $success;
        }
    }
    .option-list {
        padding-left: 40px;
        line-height: 30px;
        .option-item {
            position: relative;
            .right,
            .wrong {
                &::before {
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    text-rendering: auto;
                    position: absolute;
                    left: -20px;
                    top: 0;
                }
            }
            .wrong {
                &::before {
                    content: "\f00d";
                    color: $error;
                }
            }
            .right {
                &::before {
                    content: "\f00c";
                    color: $success;
                }
            }
            &:hover {
                background-color: rgba(#ccc, .1);
            }
        }
        .order {
            font-weight: 600;
        }
    }
    .content {

    }
    .image {

    }
    textarea {
        width: 100%;
        resize: vertical;
        min-height: 100px;
    }
    .answer-text {
        textarea {
            outline: none;
            background-color: transparent;
        }
        &.wrong {
            textarea {
                border: 1px solid $error;
            }
        }
        &.right {
            textarea {
                border: 1px solid $success;
            }
        }
    }
    &.item-right,
    &.item-wrong {
        &::before {
            font-family: "Font Awesome 5 Free";
            text-rendering: auto;
            position: absolute;
            font-size: 60px;
            font-weight: 900;;
            right: 0;
            top: 0;
        }
    }
    &.item-wrong {
        &::before {
            content: "\f00d";
            color: rgba($error, .5);
        }
    }
    &.item-right {
        &::before {
            content: "\f00c";
            color: rgba($success, .5);
        }
    }
}

.tree-item {
	text-align: left;
}

.exam-group {
    background-color: #fff;
    margin: 10px 0;
    .group-header {
        line-height: 50px;
        border-bottom: 1px solid #333;
        padding: 0 20px;
    }
    .group-body {
        display: flex;
        align-items: baseline;
        justify-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        .course-item {
            display: grid;
            grid-template-columns: 100px 1fr;
            height: 100px;
            width: 300px;
            transition: all 1s;
            border-bottom: 1px dotted;
            margin: 5px;
            .thumb {
                width: 80px;
                height: 80px;
                img {
                    max-width: 100%;
                    height: 100px;
                }
            }
            .info {
                color: #888;
                .name {
                    line-height: 30px;
                    color: #333;
                    font-weight: 700;
                }
            }
            &:hover {
                box-shadow: rgba(#333, .7) 0 0 10px;
            }
        }
    }
}

.course-header {
    margin-top: 30px;
    padding: 26px 35px;
    background: #fff;
    h1 {
        font-weight: 700;
        font-size: 20px;
        color: #333;
        text-align: center;
    }
    h2 {
        font-weight: 400;
        font-size: 14px;
        color: #666;
        line-height: 1.7;
        margin-top: 18px;
    }
}

.menu-box {
    a {
        margin: 20px 0 0 20px;
        display: inline-block;
        width: 200px;
        background: #fff;
        height: 150px;
        text-align: center;
        padding-top: 40px;
        .fa {
            display: block;
            font-size: 50px;
        }
    }
}

.tool-bar {
    .btn-bar {
        min-height: 40px;
        button,
        .btn {
            width: 100px;
            padding: 0;
            line-height: 33px;
            text-align: center;
            border-radius: 5px;
            outline: 0;
            background-color: #50c2ff;
            color: #fff;
            border: 1px solid #37B5F8;
            &.right {
                float: right;
                border: 1px solid #e9e9e9;
                color: #333;
                background-color: transparent;
                margin-left: 20px;
            }
        }
    }
    .msg-bar {
        .left {
            margin-left: 20px;
        }
        .gray {
            color: #999;
        }
        .count-right {
            color: #3da600;
            cursor: pointer;
        }
        .count-wrong {
            color: #EE4653;
            cursor: pointer;
        }
    }
}
.sheet-panel,
.analysis-panel {
    display: none;
}

.sheet-panel {
    .panel-body {
        max-height: 200px;
        overflow-y: auto;
        li {
            list-style: none;
            display: inline-block;
            width: 60px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #ccc;
            box-sizing: border-box;
            cursor: pointer;
            a {
                display: block;
            }
            &.right,
            &.wrong {
                color: #fff;
                a {
                    color: #fff; 
                }
            }
            &.active {
                border: 2px solid $success;
            }
            &.right {
                background-color: $success;
            }
            &.wrong {
                background-color: $error;
            }
            &:hover {
                border-color: #777;
            }
        }
    }
}

.rule-box {
    table {
        width: auto;
        td {
            input[type="text"] {
                min-width: 60px !important;
                width: 60px;
                text-align: center;
            }
            .fa-times {
                display: block;
                width: 30px;
                line-height: 30px;
            }
        }
        tfoot {
            background-color: #fff;
            .fa {
                display: block;
                line-height: 30px;		
            }
        }
    }
}

.container.page-box {
    background-color: #fff;
    padding: 40px;
    box-shadow: 10px 10px 0 #ccc;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    .page-remark {
        border-top: 3px dotted #ccc;
    }
    .page-info {
        margin-bottom: 30px;
        border-bottom: 1px dotted #ccc;
        h2 {
            text-align: center;
            line-height: 50px;
        }
        p {
            line-height: 30px;
            span {
                margin-right: 15px;
            }
            em {
                font-style: normal;
                font-weight: bold;
            }
        }
    }
    .page-score {
        position: absolute;
        top: 10px;
        right: 20vw;
        font-size: 120px;
        color: rgba(255,0,0,.5);
        transform: rotate(-30deg);
    }
}